<template>
    <div>
        <section class="stage">
            <figure class="ball"><span class="shadow"></span></figure>
            <h1>Welcome to Jianzhan Erp System</h1>
        </section>
    </div>
</template>

<script>
    export default {
        name: "dashboard"
    }
</script>

<style scoped lang="scss">
    .ball {
        display: inline-block;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 50%;
        position: relative;
        -webkit-transform-style: preserve-3d;
        background: url('http://hop.ie/balls/images/world-map-one-color.png') repeat-x;
        background-size: auto 100%;
        animation: move-map 30s infinite linear;
    }
    .ball:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        box-shadow: -40px 10px 70px 10px rgba(0,0,0,0.5) inset;
        z-index: 2;
    }

    .ball:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        -webkit-filter: blur(0);
        opacity: 0.3;
        background: radial-gradient(circle at 50% 80%, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
    }

    .ball .shadow {
        position: absolute;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
        transform: rotateX(90deg) translateZ(-150px);
        z-index: -1;
    }

    .stage {
        width: 300px;
        height: 300px;
        display: inline-block;
        margin: 20px;
        perspective: 1200px;
        perspective-origin: 50% 50%;
    }
    @keyframes move-map {
        0% {
            background-position: -849px 0; }

        100% {
            background-position: 0 0; } }
</style>